Ext.namespace('Ext.ux');

Ext.ux.logBar = function(config){
	var default_config = {
		logCls:				'log_body',
		logHeight:			250,
		logIconCls:			'b_log_toggle'
	};
	
	default_config.ldic = {
		time:		 'Время',
		message: 	'Сообщение'
	};
	config = Ext.applyIf(config || {}, default_config);
	Ext.ux.logBar.superclass.constructor.call(this, config);
};


Ext.extend(Ext.ux.logBar, Ext.Toolbar, {
	initComponent : function(){
		this.items = [
		    new Ext.ProgressBar({
		    	ref: 'progressBar'
		    }),
		    new Ext.Button(
		    {
		    	ref: 'button',
		    	width: 20,
		    	style: 'margin-left: 5px',
		    	iconCls: this.logIconCls,
				handler: function(button){
    				if (this.logPanel.isDisplayed()) {
    					this.logPanel.hide();
    				} else {
    					this.logPanel.show();
    				}
	    		}.createDelegate(this)
			})
		];
		Ext.ux.logBar.superclass.initComponent.call(this);
		this.on('resize',function(){
			this.progressBar.setWidth(this.getWidth()-this.button.initialConfig.width-15);
			var height = this.logHeight;
			this.log.setHeight(height);
			this.logPanel.setStyle({
				'height' : height + 'px',
				'margin-top' : '-' + (this.logPanel.getHeight()+this.getHeight()) + 'px'
			});
		}.createDelegate(this));
		
		this.on('afterrender',function(toolbar){
			toolbar.wrap = toolbar.el.wrap();
			toolbar.wrap.setStyle();
		 	this.logPanel = toolbar.wrap.createChild({
		 		tag: 'div',
		 		style: 'width: 100%; position: absolute; left: 0px; overflow: hidden' 
		 	});
		 	this.logPanel.setVisibilityMode(Ext.Element.DISPLAY);
		 	
		 	this.log = new Ext.list.ListView({
		 		renderTo: this.logPanel,
				hideHeaders: false,
				border: true,
				style: 'margin: 0px 8px',
		 		cls: this.logCls,
				autoScroll: true,
				store: new Ext.data.ArrayStore({
					fields: ['type','time','text'],
					data: [
						['error',2,3],['warning',2,3],['ok',2,3],['question',2,3],['favorite',2,3],[1,2,3],[1,2,3],[1,2,3],[1,2,3],[1,2,3],[1,2,3],[1,2,3],[1,2,3],[1,2,3],
						[1,2,3],[1,2,3],[1,2,3],[1,2,3],[1,2,3],[1,2,3],[1,2,3],[1,2,3],[1,2,3],[1,2,3],[1,2,3],[1,2,3],[1,2,3],[1,2,3]
					
					]
				}),
				columns: [{
			        header: '&nbsp;',
			        width: 0.1,
			        dataIndex: 'type',
			        tpl: '<div class="i_log i_log_{type}">&nbsp;</div>'
			    },{
			        header: this.ldic.time,
			        width: 0.1,
			        dataIndex: 'time'
			    },{
			        header: this.ldic.message,
			        width: .8, 
			        dataIndex: 'text'
			    }]
			});
		 	console.log(new Date().format(''));
		}.createDelegate(this));
	},

	addToLog :  function(message,type){
		var store = this.log.getStore();
		store.add(new store.recordType({type: type, time: new Date().format('H:i:s'),text: message}));
	},
	
	showMessage :  function(message,type){
		this.addToLog(message,type);
		this.progressBar.update('&nbsp;'+message);
	}
});